<template>
  <div class="index">
	<div class="wraps">
<transition name="foldBox">
	<div class="lead" v-if="isLead">
		<ul>
			<li><a href="javascript:;" @click="goTop" class="ld_1"></a></li>
			<li>
				<transition name="fold">
					<div class="lead rex" v-if="type==1">
						<dl>
							<dt></dt>
							<dd>0571-88228812</dd>
						</dl>
						<strong>工作日 9：30-21：00</strong>
					</div>
				</transition>
				<a href="javascript:;" @mouseenter="enter(1)" @mouseleave="leave(1)" class="ld_2"></a>
			</li>
			<li>
				<transition name="fold">
					<div class="lead rex1" v-if="type==2">
						<img src="../../static/common/images/Wechat.jpeg">
					</div>
				</transition>
			<a href="javascript:;" class="ld_3" @mouseenter="enter(2)" @mouseleave="leave(2)"></a></li>
		</ul>
	</div>
</transition>	
	<div class="banner"><div class="insi">
		<a href="javascript:;" @click="goRegister">立即注册</a></div>
	</div>
	<div class="main" style="margin:0 auto; !important; padding:40px 0 !important;">
		<div class="ct_area">
			<div class="cabox">
				<h4></h4>	
				<fieldset>
					<legend>我们的优势</legend>
				</fieldset>		
				<p>优推-互动式效果广告平台，面向众多大流量但缺乏变现能力的产品，如工具类app、媒体类app，门户app、垂直领域app，以及大粉丝微信公众号等。区别于普通的广告，这种广告形式适用于多场景、多种媒体形态、并且具备高效的变现能力。</p>
				<ul class="each clearfix">
					<li>
						<dl>
							<dt class="eh_1"></dt>
							<dd>
								<h3>互动引导高转化</h3>
								<h6>丰富的抽奖活动和互动引导<br />大大提升用户的转化、实现高转化</h6>
							</dd>
						</dl>
					</li>
					<li>
						<dl>
							<dt class="eh_2"></dt>
							<dd>
								<h3>1天轻松接入</h3>
								<h6>采用h5专属链接方式<br />多种入口形式灵活选择，快速接入</h6>
							</dd>
						</dl>
					</li>
					<li>
						<dl>
							<dt class="eh_3"></dt>
							<dd>
								<h3>高效流量变现</h3>
								<h6>独家电商、游戏、金融等广告资源<br />为您带来高额的流量变现收入</h6>
							</dd>
						</dl>
					</li>
					<li>
						<dl>
							<dt class="eh_4"></dt>
							<dd>
								<h3>支持冠名和定制</h3>
								<h6>支持定制活动需求和冠名<br />为流量主提升产品品牌</h6>
							</dd>
						</dl>
					</li>															
				</ul>
			</div>		
		</div>
		<div class="ct_area">
			<fieldset>
				<legend>只需三步，轻松接入</legend>
			</fieldset>	
			<ul class="each2 clearfix">
				<li>
					<dl>
						<dt class="eh_1"></dt>
						<dd>1.注册帐号</dd>
					</dl>
				</li>
				<li>
					<dl>
						<dt class="eh_2"></dt>
						<dd>2.后台获取链接或js</dd>
					</dl>
				</li>
				<li>
					<dl>
						<dt class="eh_3"></dt>
						<dd>3.配置链接或者js</dd>
					</dl>
				</li>															
			</ul>						
		</div>	
		<div class="ct_area2">
			<div class="cabox">
				<h5></h5>
				<ul class="linkad clearfix" style="display:block">
					<li><a href="JavaScript:;"><img src="../../static/common/images/ad_01.jpg" /></a></li>
					<li><a href="JavaScript:;"><img src="../../static/common/images/ad_02.jpg" /></a></li>
					<li><a href="JavaScript:;"><img src="../../static/common/images/ad_03.jpg" /></a></li>
					<li><a href="JavaScript:;"><img src="../../static/common/images/ad_04.jpg" /></a></li>
					<li><a href="JavaScript:;"><img src="../../static/common/images/ad_05.jpg" /></a></li>
					<li><a href="JavaScript:;"><img src="../../static/common/images/ad_06.jpg" /></a></li>				
				</ul>	
			</div>		
		</div>						
	</div>
</div>
</div>
</template>
<script>
export default {
  name: "index",
  data() {
    return {
      type: 0,
      isLead: false,
      scroll: "",
      timer: null
    };
  },
  mounted() {
    window.addEventListener("scroll", this.menu);
  },
  methods: {
    goRegister() {
      this.$router.push({ path: "/register", query: { type: 1 } });
    },
    goTop() {
      window.scrollTo(0, 0);
    },
    enter(type) {
      this.type = type;
    },
    leave() {
      this.type = 0;
    },
    menu() {
      this.scroll =
        document.documentElement.scrollTop || document.body.scrollTop;
      this.scroll >= 650 ? (this.isLead = true) : (this.isLead = false);
    }
  }
};
</script>
<style>
.lead {
  transform: translate3d(0, -50px, 0);
}
.fold-enter-active,
.fold-leave-active {
  transition: all 0.5s;
}
.fold-enter,
.fold-leave-active {
  transform: translate3d(0, 0, 0);
  transition: all 0.1s;
}
.foldBox-enter-active,
.foldBox-leave-active {
  transition: opacity 0.5s;
}
.foldBox-enter,
.foldBox-leave-active {
  opacity: 0;
}
.linkad {
  width: 1200px;
  margin: 10px auto;
}
.linkad li {
  width: 177px;
  height: 62px;
  float: left;
  margin-left: 13px;
  margin-right: 10px;
  margin-top: 10px;
}
.linkad li img {
  width: 100%;
  height: 100%;
}
</style>
